var thisText;
class Button extends React.Component{
    render(){
        return (
            <button onClick={this.props.onClick}>
                {this.props.children}
            </button>
        );
    }
}

class GlyphIcon extends React.Component{
    render(){
        return (
            <span className={'glyphicon glyphicon-' + this.props.icon}>
            </span>
    );
    }
};

class HelloMessage extends React.Component{
    render() {
        return <h2>{this.props.message}</h2>;
    }
};

class TextBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isEditing: false,
            text: this.props.label
        }
    }

    value() {
        thisText = this.refs.messageTextBox;
        return this.refs.messageTextBox.value;
    }

    update() {
        this.setState(
            {
                text: this.value(),
                isEditing: false
            });
        this.props.update();
    }

    edit() {
        this.setState({isEditing: true});
    }

    render() {
        return (
            <div>
                {this.props.label}<br/>
                <input
                    type='text'
                    ref='messageTextBox'
                    disabled={!this.state.isEditing}/>
                {
                    this.state.isEditing ?
                        <Button onClick={this.update.bind(this)}>
                            <GlyphIcon icon='ok'/> Update
                        </Button>
                        :
                        <Button onClick={this.edit.bind(this)}>
                            <GlyphIcon icon='pencil'/> Edit
                        </Button>
                }
            </div>
        );
    }
}

class HelloReact extends React.Component{
    constructor () {
        super();
        this.state = { firstName: '', lastName: ''};
    }

    update () {
        this.setState({
            firstName: this.refs.firstName.value(),
            lastName: this.refs.lastName.value()});
    }
    render() {
        return (
            <div>
            <HelloMessage
        message={'Hello ' + this.state.firstName + ' ' + this.state.lastName}>
            </HelloMessage>
            <TextBox label='First Name' ref='firstName' update={this.update.bind(this)}>
    </TextBox>
        <TextBox label='Last Name' ref='lastName' update={this.update.bind(this)}>
    </TextBox>
        </div>
    );
    }
};

ReactDOM.render(
<HelloReact/>,
    document.getElementById('root'));